
<template>
  <div class="shareDetailBox">
      <TopBar>明细记录</TopBar>
      <div class="headerBox">
        <tab :line-width="3" custom-bar-width="1.4rem"  style="margin-top:1.3rem">
          <tab-item selected @click.native="getList">邀请记录</tab-item>
          <tab-item @click.native="getList">奖励记录</tab-item>
        </tab>
      </div>
      <div class="shareDetainContent vux-1px-t" v-if="type">
        <p class="detailRow">
          <span>用户名</span>
          <span>注册时间</span>
        </p>
        <p v-for="item in list" :key="item.id" class="detailRow vux-1px-t" style="color:#000;font-size:0.34rem">
          <span>{{item.phone | hide6Num}}</span>
          <span v-text="item.yqtime.split(' ')[0]"></span>
        </p>
      </div>
      <div v-else class="shareDetainContent vux-1px-t">
        <p class="detailRow1">
          <span>用户名</span>
          <span>投资金额</span>
          <span>注册时间</span>
          <span>返利金额</span>
        </p>
        <p v-for="item in list1" :key="item.id" class="vux-1px-t detailRow0" style="color:#000;font-size:0.38rem">
          <span>{{item.phone | hide6Num}}</span>
          <span v-text="item.touzi"  style="margin-left:.5rem;width:10%"></span>
          <span v-text="item.yqtime.split(' ')[0]"  style="margin-left:1.2rem"></span>
          <span v-text="parseInt(item.money)"  style="margin-left:1.3rem;width:5%"></span>
        </p>
      </div>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import { Tab, TabItem } from 'vux'
import {getSDK} from '../../../service/wxShare.js'

export default {
  components:{
    TopBar,
    Tab,
    TabItem,
  },
  beforeCreate(){
      getSDK()
    },
  filters:{
    hide6Num:function(val){
      return val.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3");
    }
  },

  data(){
    return {
      list:this.$route.params.list.list1,
      list1:this.$route.params.list.list2,
      type:true
    }
  },
  methods:{
    getList(){
      this.type = !this.type
    }
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';

.shareDetailBox{
  .vux-tab .vux-tab-item.vux-tab-selected{
    color: #dd3832;
    border-bottom: .1rem solid #dd3832;
  }
  span.vux-tab-bar-inner{
    background-color:#dd3832;
  }
  .headerBox{
    box-shadow:0 .3rem 1rem rgb(240, 238, 238);
  }
  .shareDetainContent{
    .wh(88%,100%);
    margin: 0 auto;
    margin-top: 0.5333rem;
    .sc(0.42rem,#939393);
    .detailRow{
      .fx(row,space-between);
      .bs();
      .wh(100%,0.88rem);
    }
    .detailRow1{
      .bs();
      .wh(100%,0.88rem);
      .fx(row,space-between)
    }
    .detailRow0{
      .bs();
      .wh(100%,0.88rem);
      .fx(row,flex-start)
    }
  }
}

</style>
